<!-- pages/components/navigator/navigator.vue -->
<template>
	<view class="wrapper">
		<view class="title">1. (默认) 跳转到新页面</view>
		<view class="box">
			<!-- open-type="navigate" 或不写 -->
			<navigator class="nav-btn" url="/pages/components/view/view">
				<button type="default">跳转到 "view" 演示页 (能返回)</button>
			</navigator>
		</view>
		
		<view class="title">2. 跳转到 TabBar 页面</view>
		<view class="box">
			<!-- 关键: open-type="switchTab" -->
			<navigator class="nav-btn" url="/pages/tabBar/api/api" open-type="switchTab">
				<button type="primary">切换到 "API" 标签页 (不能返回)</button>
			</navigator>
		</view>
	</view>
</template>

<script setup>
// 本页面无需 <script> 逻辑
</script>

<style>
/* 通用样式 */
.wrapper {
	padding: 15px;
}
.title {
	font-size: 16px;
	font-weight: bold;
	padding: 10px 0;
	margin-top: 10px;
}
.box {
	padding: 15px;
	background-color: #fff;
	border-radius: 5px;
}
/* navigator 默认是行内元素，我们把它当按钮用 */
.nav-btn {
	text-decoration: none; /* 去掉 H5 下的下划线 */
}
</style>